<%@ page language="java" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML>
<html>
<head>
<title>手机绑定</title>
<base href="<%=basePath%>pages/weixin/">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="user-scalable=no,initial-scale=1.0, maximum-scale=1.0"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
 <meta name="format-detection" content="telephone=no">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="apple-touch-fullscreen" content="yes"/>
<link rel="stylesheet" type="text/css" href="../../static/css/css.css"/>
<style>
.ft_size3{display:inline-block;width:57px}
.txts{height:24px;border:none;outline:none;font-size: 16px;font-weight: bold;color:#000;}
</style>

<script type="text/javascript" src="../../static/zepto.min.js"></script>
<script type="text/javascript">
var height;
$(function() {
	height = $(document).height();	
});

//弹框提示
function msg(msg){
	$('#tczz').show().css('height',height);
    $("#tccnr").html(msg);
 
	if(msg=="绑定成功"){
	   	$(".tcctit").html("成功提示");
	   	$("#tccnr").attr("style" ,"text-align:center" );
	} else {
		$(".tcctit").html("错误提示");
	}
	
	$('#tccbox').show().css({
		'top':(height/2)-($('#tccbox').height()/2),
		'left':($(document).width()/2)-($('#tccbox').width()/2)
	});
}

//弹框的确定按钮
function tanGb(){
	var msg = $("#tccnr").html();
	if(msg=="绑定成功") {
	     document.location.href="#";	
	} else {
		$('.tczz').hide();
		$('.tccbox').hide();
	}
}

//隐藏微信工具栏
document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
	WeixinJSBridge.call('hideToolbar');
});
</script>
  
<script>
	$(function() {
		$('#reset').click(function() {
			$('#phone').val('');
			$('#phone').focus();
			$('#reset').hide();
			return false;
		});
		$('#phone').keyup(function() {
			if ($(this).val() != '') {
				$('#reset').show();
			}
		});
	})

	//定时器
	var timer, t=60;
	function getVerify(){
 		$('#sendCode').val(t+'秒后重新获取');
 		$('#sendCode').attr('disabled', true);
 		$('#sendCode').css('background', 'gray');
 		timer = window.setInterval(addsec, 1000);
 		
 		//发送验证码
 		if (!/^1\d{10}$/.test($('#phone').val())) {
			$('#phone').val('');
			$('#phone').focus();
			msg("亲，请输入11位的手机号");
			
			window.clearInterval(timer);
  			$('#sendCode').val('发送手机验证码');
  			$('#sendCode').removeAttr('disabled');
  			$('#sendCode').css('background', '#05be01');
			return false;
		}
		//提交发验证请求
		$.post('<%=path%>/wechat/sendSmsCodeWeixin.do', {phone: $.trim($('#phone').val())}, function(json) {
			if(!json.success){
				msg('短信发送失败：<b>'+json.message+'</b>');
				window.clearInterval(timer);
  				$('#sendCode').val('发送手机验证码');
  				$('#sendCode').removeAttr('disabled');
  				$('#sendCode').css('background', '#05be01');
			}
		}, 'json');
	}		
	function addsec(){
 		if(t > 0) {
 			t--;
  			$('#sendCode').val(t+'秒后重新获取');
 		} else {
  			window.clearInterval(timer);
  			$('#sendCode').val('重新获取验证码');
  			$('#sendCode').removeAttr('disabled');
  			$('#sendCode').css('background', '#05be01');
 		}
	}
	
	//验证手机号
	function beforeSubmit(){
	    var phone = $("#phone").val();
	    if(phone=='' || !/^\d{11}$/.test(phone)) {
	    	msg("亲，请输入11位的手机号");
	    	window.clearInterval(timer);
  			$('#sendCode').val('发送手机验证码');
  			$('#sendCode').removeAttr('disabled');
  			$('#sendCode').css('background', '#05be01');
	    	return false;
	    }
	    return true;
	}
	
</script>
</head>
<body >
	<div class="wrap">
		<form id="CardForm" name="CardForm" action="<%=path%>/wechat/bindPhoneWeixin.do" method="post" class="form">
  			<input type="hidden" name="openId" value="${param.openId}"/>
			<div class="tit1">亲，请告诉我您要绑定的手机号</div>
			<ul class="lisbox">
				<li>
					<span class="bdmc ft_size3">手机号</span> 
					<input type="text" name="phone" id="phone" class="txtc" placeholder="输入您的手机号"/> 
					<img style="display:none" class="reset" id="reset" src="../../static/img/reset.png" width="14" alt="" />
				</li>
				
				<li class ="last">
					<span class="bdmc ft_size3">验证码</span>
					<input type="text" name="code" id="code" class="txtc" placeholder="输入收到的验证码"/>
					<input type="button" id="sendCode" class="codebt" value="发送验证码" onclick="getVerify()"/>
				</li>					
			</ul>
			<div class="btnbox">
				<input type="submit" id="CardForm_0" value="下一步" class="nxtbt" onclick="return beforeSubmit();"/>
			</div>
			<div class="foot"></div>
		</form>
	</div>
    
    <!-- 弹框 -->
	<div class="tczz" id="tczz"></div>
	<div class="tccbox" id="tccbox">
  		<div class="tcctit"></div>
  		<div id="tccnr" class="tccnr"></div>
  		<div class="tccbtn">
    		<input type="button" onClick="tanGb()" class="btn con" value="确认">
  		</div>
	</div>
</body>
</html>